<% var data = locals.report; %>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title><%=data.title %></title>
  <style>
    .main{width: 800px;margin: 10px auto;}
    pre{white-space: pre-wrap; word-break: break-word;}

    .title{
      font-family: '宋体', Simsun;
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
    .sub-title{
      font-family: '宋体', Simsun;
      font-size: 18px;
    }
    .date{
      font-family: '宋体', Simsun;
      font-size: 18px;
      text-align: center;
    }
    .empty{
      height: 2em;
    }
    .text{
      font-family: '宋体', Simsun;
      text-indent: 2em;
      font-size: 18px;
    }
    .pic{
      text-align: center;
    }
    .pic img{
      width: 400px;
      height: 400px;
    }
    .pic-desc{
      font-family: '宋体', Simsun;
      text-align: center;
      font-size: 12px;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="main">
    <h1 class="title"><%=data.title%></h1>
    <div class="date">
      <%= data.date%>
    </div>
    <div class="content">
      <% if(data.content){
          data.content.forEach(function(el,i){
          switch(el.type){
            case 'sub-title':
       %>
      <h2 class="sub-title"><%=el.data%></h2>
          <% break;
            case 'text':
          %>
      <pre class="text"><%= el.data%></pre>
      <% break;
        case 'empty':
      %>
      <div class="empty"></div>
      <% break;
        case 'pic':
      %>
      <div class="pic">
        <img src="images/<%= el.data %>" alt=""/>
      </div>
      <% break;
        case 'pic-desc':
      %>
      <div class="pic-desc">
        <%=el.data%>
      </div>
      <%
        break;
        default :
          break;
      }
      %>

      <% });}%>
    </div>

  </div>

</div>
</body>
</html>